<template>
  <div class="mtop-20">
    <el-card>
      <div class="info">
        <div class="img-wrap">
          <div class="day font-bold">{{ today }}</div>
        </div>
        <div class="text mleft-30 mtop-20">
          <div class="font-24 font-bold title">每日歌曲推荐</div>
          <div class="desc">根据你的音乐口味生成，每天6:00更新</div>
        </div>
      </div>
     <div class="btn-wrap">
      <button class="btn btn-red" @click="playAll">
        <i class="iconfont icon-bofang"></i>播放全部
      </button>
      <button class="btn btn-white mleft-10" @click="openAddDialog">
        <i class="el-icon-folder-add"></i>收藏全部
      </button>
     </div>
     <div class="mtop-20 div-line"></div>
     <MusicList :list="list" v-if="showList" ref="listRef"></MusicList>
     <AddMusicDialog ref="addDialog" :musicList="idList"></AddMusicDialog>
    </el-card>
  </div>
</template>

<script>
import { getRecomSong } from "@/api/request";
import MusicList from "@/components/list/MusicList.vue"
import AddMusicDialog from "@/components/addMusic/addMusic.vue"
export default {
  components:{
    MusicList,
    AddMusicDialog
  },
  data() {
    return {
      list: [],
      today: "1",
    };
  },
  computed:{
    showList(){
      return this.list.length !== 0 ? true : false ;
    },
    idList(){
      return this.list.map(item => item.id);
    }
  },
  created() {
    this.getList();
    this.getToday();
  },
  methods: {
    async getList() {
      const { data: res } = await getRecomSong();
      if (res.code !== 200) return;
      this.list = res.data.dailySongs;
    },
    getToday() {
      let day = new Date().getDate();
      day = day < 10 ? "0" + day : "" + day;
      this.today = day;
    },
    playAll(){
      this.$refs.listRef.playMusicAll();
    },
    openAddDialog(){
      if(this.idList.lenght === 0) return this.$message.error('歌曲列表为空');
      this.$refs['addDialog'].openDialog();
    },
  },
};
</script>

<style lang="less" scoped>
.el-card{
  padding-left: 100px;
}
.info {
  display: flex;
  margin-left: 10px;
}
.img-wrap {
  height: 100px;
  width: 100px;
  background: url("../../assets/img/calendar.png") 0 0/100% no-repeat;
  .day {
    width: 100px;
    height: 40px;
    font-size: 40px;
    color: #ec4141;
    margin-top: 40px;
    text-align: center;
  }
}
.text{
  .title{
    font-size: 24px;
  }
  .desc{
    font-size: 12px;
    color: #676767;
  }
}
.btn-wrap{
  i{
    font-size: 14px;
  }
}
</style>